<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员梗生成器 | AI创意编程幽默</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1a202c;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-number {
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            font-weight: 700;
            color: white;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        .highlight-text:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0.2em;
            width: 100%;
            height: 0.4em;
            background-color: rgba(118, 75, 162, 0.3);
            z-index: -1;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .highlight-text:hover:after {
            transform: scaleX(1);
            transform-origin: left;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <div class="inline-flex items-center justify-center mb-6 px-4 py-2 rounded-full bg-white bg-opacity-20">
                <i class="fas fa-code mr-2"></i>
                <span class="font-medium">程序员专属</span>
            </div>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 font-serif">
                程序员梗生成器
            </h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                一个基于AI的创意工具，为开发者带来编程世界的幽默时刻
            </p>
            <div class="mt-10">
                <a href="#how-it-works" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 transition duration-150 ease-in-out">
                    立即体验 <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">释放编程世界的幽默潜能</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    程序员梗生成器是一个基于扣子空间的AI Agent，专为开发者打造。输入编程语言或技术主题，获取专属幽默梗，让代码生活不再单调！
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能生成</h3>
                    <p class="text-gray-600">基于强大的AI模型，精准理解编程文化，生成贴合主题的幽默内容</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">一键分享</h3>
                    <p class="text-gray-600">轻松分享到飞书、微信或Discord，与同事朋友共享欢乐</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">快速上手</h3>
                    <p class="text-gray-600">操作简单直观，无需编程经验，打开即用</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How it Works Section -->
    <section id="how-it-works" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-900 font-serif">创建你的专属梗生成器</h2>
            
            <div class="space-y-12">
                <!-- Step 1 -->
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0">
                        <div class="step-number">1</div>
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">登录扣子空间</h3>
                        <p class="text-gray-600 mb-4">访问 <a href="https://www.coze.cn/" class="text-indigo-600 hover:underline" target="_blank">扣子空间官网</a>，使用飞书账号或邀请码登录</p>
                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                            <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753536370465-b7861666-2cf4-46fa-a21c-49170523c41f.png" alt="登录扣子空间" class="rounded-md w-full">
                        </div>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0">
                        <div class="step-number">2</div>
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">创建新Agent</h3>
                        <p class="text-gray-600 mb-4">在左侧导航栏点击"创建Agent"，命名为"程序员梗生成器"，选择"标准创建"模式</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753536423316-f9101a77-9754-47fc-ac85-b2f0fd662ffd.png" alt="创建Agent" class="rounded-md w-full">
                            </div>
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753580445256-0b5c1964-65cf-41ac-b99c-6d9aa14d838e.png" alt="Agent设置" class="rounded-md w-full">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0">
                        <div class="step-number">3</div>
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">设计工作流</h3>
                        <p class="text-gray-600 mb-4">在Coze Studio中拖拽"豆包1.5 Pro"节点并配置提示词，添加输出节点完成工作流</p>
                        <div class="grid grid-cols-1 gap-4">
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753581408283-17e4a975-e31e-4c34-98b2-3ac1da9039b6.png" alt="工作流设计" class="rounded-md w-full">
                            </div>
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <pre class="p-4 bg-gray-800 text-gray-100 rounded-md overflow-x-auto"><code>你是一个幽默的程序员梗生成器，精通编程文化和笑话。用户将输入一个编程语言（如Python、JavaScript）或技术主题（如调试、算法）。请完成以下任务：
1. 根据用户输入，生成一个简短、幽默的程序员梗或笑话（50-100字）。
2. 确保内容贴合程序员文化，幽默且易懂。
3. 输出格式：
   - 梗/笑话：{生成的文本}
   - 适合分享平台：飞书、微信、Discord</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 4 -->
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="flex-shrink-0">
                        <div class="step-number">4</div>
                    </div>
                    <div class="flex-grow">
                        <h3 class="text-2xl font-bold mb-4 text-gray-800">测试与发布</h3>
                        <p class="text-gray-600 mb-4">保存工作流后进行测试，确认无误后发布到飞书、豆包或微信公众号</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753581918377-bae11fb9-31c6-4b65-b421-3fe92b9420d2.png" alt="测试工作流" class="rounded-md w-full">
                            </div>
                            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753582217078-081e43a2-0108-455f-9e74-0d161040e98e.png" alt="发布Agent" class="rounded-md w-full">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Example Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">看看这些<highlight-text class="highlight-text">有趣例子</highlight-text></h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    以下是程序员梗生成器可以创建的幽默示例
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-indigo-50 p-6 rounded-xl border border-indigo-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-2 rounded-full mr-3">
                            <i class="fas fa-terminal text-indigo-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-indigo-800">输入：Python</h3>
                    </div>
                    <div class="bg-white p-4 rounded-lg mb-4">
                        <p class="text-gray-800 italic">"为什么Python程序员喜欢用空格缩进？因为他们相信代码就像诗，空格能让它更优雅！"</p>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-share-alt mr-2"></i>
                        <span>适合分享平台：飞书、微信、Discord</span>
                    </div>
                </div>
                
                <div class="bg-blue-50 p-6 rounded-xl border border-blue-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-2 rounded-full mr-3">
                            <i class="fas fa-bug text-blue-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-blue-800">输入：调试</h3>
                    </div>
                    <div class="bg-white p-4 rounded-lg mb-4">
                        <p class="text-gray-800 italic">"程序员最擅长什么魔术？把'昨天还能运行'的代码变成'今天怎么就坏了'的代码。"</p>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-share-alt mr-2"></i>
                        <span>适合分享平台：飞书、微信、Discord</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-indigo-50">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-6 font-serif">准备好为你的编程生活增添一些幽默了吗？</h2>
            <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
                立即创建你的程序员梗生成器，与团队分享快乐，让代码不再枯燥！
            </p>
            <a href="https://www.coze.cn/" target="_blank" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 ease-in-out">
                前往扣子空间 <i class="fas fa-external-link-alt ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Enhanced Features Section -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">进阶<highlight-text class="highlight-text">功能扩展</highlight-text></h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    让你的梗生成器更加强大有趣
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-image"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">图片生成</h3>
                    <p class="text-gray-600 mb-4">集成图像生成插件，将梗转为迷因图片，增强分享效果</p>
                    <div class="text-sm text-indigo-600 font-medium">
                        <span>需要Coze Store支持</span>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-language"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多语言梗</h3>
                    <p class="text-gray-600 mb-4">支持生成英文或日文梗，吸引国际程序员用户</p>
                    <div class="text-sm text-indigo-600 font-medium">
                        <span>扩展受众群体</span>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 card-hover">
                    <div class="text-indigo-600 mb-4 text-2xl">
                        <i class="fas fa-bell"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">定时推送</h3>
                    <p class="text-gray-600 mb-4">配置Agent每天推送一个随机梗到飞书群，增加团队趣味性</p>
                    <div class="text-sm text-indigo-600 font-medium">
                        <span>活跃团队氛围</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mermaid Diagram -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4 font-serif">工作流<highlight-text class="highlight-text">逻辑架构</highlight-text></h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                    程序员梗生成器的核心工作原理示意图
                </p>
            </div>
            
            <div class="bg-gray-50 p-6 rounded-xl">
                <div class="mermaid">
                    graph TD
                        A[用户输入] --> B(扣子空间Agent)
                        B --> C{输入类型}
                        C -->|编程语言| D[生成语言相关梗]
                        C -->|技术主题| E[生成主题相关笑话]
                        D --> F[格式优化]
                        E --> F
                        F --> G[输出结果]
                        G --> H[分享到平台]
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
        
        // 微交互效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.classList.add('shadow-lg');
            });
            card.addEventListener('mouseleave', function() {
                this.classList.remove('shadow-lg');
            });
        });
    </script>
</body>
</html>